<template>
    <u-tabbar
        :value="tabbarActive"
        :activeColor="tabbarData.style?.selected_color"
        :inactiveColor="tabbarData.style?.default_color"
        :fixed="true"
        :placeholder="true"
        :safeAreaInsetBottom="true"
        v-if="showTabbar"
    >
        <u-tabbar-item
            v-for="(item, index) in tabbarData.list"
            :key="index"
            :text="item['name']"
            :icon="getTabbarIcon(item, index)"
            @click="tabbarClick(item, index)"
        ></u-tabbar-item>
    </u-tabbar>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRoute } from "@/hooks/useRoute";
import useConfigStore from "@/stores/config";
import { getUrl } from "@/utils/common";
import { getCurrentPage } from "@/utils/pages";

const configStore = useConfigStore();
const tabbarActive = ref();
const currentPage = getCurrentPage();

const tabbarData = computed(() => {
    return configStore.tabbarConfig;
});

const showTabbar = computed(() => {
    if (tabbarData.value?.list) {
        const current = tabbarData.value.list.findIndex((item: any) => {
            return item.link === "/" + currentPage.route;
        });
        tabbarActive.value = current;
        return current >= 0;
    } else {
        return false;
    }
});

const getTabbarIcon = (item, index) => {
    return getUrl(
        tabbarActive.value === index
            ? item?.selected_icon
            : item?.unselected_icon
    );
};

const tabbarClick = (item, index) => {
    let link = item?.link || "";
    if (link) useRoute().jumpTo({ url: link });
};
</script>
